<p-table [value]="items"
  dataKey="Id"
  [loading]="isLoading"
  [rowHover]="true"
  styleClass="p-datatable-sm p-datatable-striped">
  <ng-template pTemplate="caption">
    <div class="flex">
      <button type="button"
        pButton
        pRipple
        icon="pi pi-file"
        class="mr-2"
        [routerLink]="['/scenarios', 'design', 'new']"></button>
      <button type="button"
        pButton
        pRipple
        icon="pi pi-refresh"
        class="p-button-info ml-auto"
        [loading]="isLoading"
        (click)="onRefreshClick()"></button>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th></th>
      <th pSortableColumn="Id">Id <p-sortIcon field="Id"></p-sortIcon></th>
      <th pSortableColumn="Name">Name <p-sortIcon field="Name"></p-sortIcon></th>
      <th>加载状态</th>
      <th pSortableColumn="CreatedOn">CreatedOn <p-sortIcon field="CreatedOn"></p-sortIcon></th>
      <th></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body"
    let-item
    let-expanded="expanded">
    <tr>
      <td></td>
      <td>
        {{item.Id}}
      </td>
      <td>
        {{item.Name}}
      </td>
      <td>
        <span [ngClass]="item.IsAlive? 'scenario-alive':'' ">
          {{item.IsAlive? "已加载":"未加载"}}
        </span>
        <p-button *ngIf="item.IsAlive"
          [rounded]="true"
          [text]="true"
          title="卸载"
          severity="danger"
          icon="pi pi-stopwatch"
          (onClick)="onUnloadScenario(item.Id)"></p-button>
      </td>
      <td>
        {{item.CreatedOn}}
      </td>
      <td>
        <div class="flex">
          <button pButton
            class="ml-2 p-button-sm ml-auto"
            icon="pi pi-th-large"
            [routerLink]="['/scenarios', 'design', item.Id]">设计</button>
          <button pButton
            class="ml-2 p-button-sm p-button-warning"
            icon="pi pi-send"
            [routerLink]="['/kanban', 'monitor', item.Id]">运行</button>
          <button pButton
            class="ml-2 p-button-sm p-button-danger"
            icon="pi pi-trash"
            (click)="onDeleteClick(item.Id)">删除</button>
        </div>
      </td>
    </tr>
  </ng-template>
</p-table>